<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">快捷方式</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-shortcut">
                                <div carousel-item>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs3">
                                            <a lay-href="home/homepage1">
                                                <i class="layui-icon layui-icon-console"></i>
                                                <cite>主页一</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="home/homepage2">
                                                <i class="layui-icon layui-icon-chart"></i>
                                                <cite>主页二</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="component/layer/list">
                                                <i class="layui-icon layui-icon-template-1"></i>
                                                <cite>弹层</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="/senior/im/">
                                                <i class="layui-icon layui-icon-chat"></i>
                                                <cite>聊天</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="component/progress/index">
                                                <i class="layui-icon layui-icon-find-fill"></i>
                                                <cite>进度条</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="app/workorder/list">
                                                <i class="layui-icon layui-icon-survey"></i>
                                                <cite>工单</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="user/user/list">
                                                <i class="layui-icon layui-icon-user"></i>
                                                <cite>用户</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/system/website">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>设置</cite>
                                            </a>
                                        </li>
                                    </ul>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a lay-href="set/user/info">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>我的资料</cite>
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">待办事项</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-backlog">
                                <div carousel-item id="ulSelect">
                                    <ul class="layui-row layui-col-space10" id="ulS">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-dataview">
                                <div carousel-item id="LAY-index-dataview">
                                    <div>
                                        <!--财务概览-->
                                        <div id="Circular" style="width: 850px;height:300px;"></div>
                                    </div>
                                    <div>
                                        <!--财务概览-->
                                        <div id="way" style="width: 850px;height:300px;"></div>
                                    </div>
                                    <div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-tab layui-tab-brief layadmin-latestData">
                            <ul class="layui-tab-title">
                                <li class="layui-this">今日热搜</li>
                                <li>今日热帖</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <table id="LAY-index-topSearch"></table>
                                </div>
                                <div class="layui-tab-item">
                                    <table id="LAY-index-topCard"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">版本信息</div>
                <div class="layui-card-body layui-text">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>当前版本</td>
                            <td>
                                <script type="text/html" template>
                                    v{{ layui.admin.v }}
                                    <a href="http://fly.layui.com/docs/3/" target="_blank" style="padding-left: 10px;">日志</a>
                                </script>
                                <a href="javascript:;" layadmin-event="update" style="padding-left: 5px;">检查更新</a>
                            </td>
                        </tr>
                        <tr>
                            <td>基于框架</td>
                            <td>
                                <script type="text/html" template>
                                    layui-v{{ layui.v }}
                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td>主要特色</td>
                            <td>单页面 / 响应式 / 清爽 / 极简</td>
                        </tr>
                        <tr>
                            <td>获取渠道</td>
                            <td style="padding-bottom: 0;">
                                <div class="layui-btn-container">
                                    <a href="http://www.layui.com/admin/" target="_blank"
                                       class="layui-btn layui-btn-danger">获取授权</a>
                                    <a href="http://fly.layui.com/download/layuiAdmin/" target="_blank"
                                       class="layui-btn">立即下载</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">效果报告</div>
                <div class="layui-card-body layadmin-takerates">
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）
                        </h3>
                        <div class="layui-progress-bar" lay-percent="65%"></div>
                    </div>
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>签到率（日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降"
                                              lay-offset="-15"></span>）</h3>
                        <div class="layui-progress-bar" lay-percent="32%"></div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">实时监控</div>
                <div class="layui-card-body layadmin-takerates">
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>CPU使用率</h3>
                        <div class="layui-progress-bar" lay-percent="58%"></div>
                    </div>
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>内存占用率</h3>
                        <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">产品动态</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-news" data-autoplay="true" data-anim="fade"
                         lay-filter="news">
                        <div carousel-item>
                            <div><a href="http://fly.layui.com/docs/2/" target="_blank" class="layui-bg-red">layuiAdmin
                                快速上手文档</a></div>
                            <div><a href="http://fly.layui.com/vipclub/list/layuiadmin/" target="_blank"
                                    class="layui-bg-green">layuiAdmin 会员讨论专区</a></div>
                            <div><a href="http://www.layui.com/admin/#get" target="_blank" class="layui-bg-blue">获得
                                layui 官方后台模板系统</a></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">
                    作者心语
                    <i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>
                </div>
                <div class="layui-card-body layui-text layadmin-text">
                    <p>一直以来，layui 秉承无偿开源的初心，虔诚致力于服务各层次前后端 Web
                        开发者，在商业横飞的当今时代，这一信念从未动摇。即便身单力薄，仍然重拾决心，埋头造轮，以尽可能地填补产品本身的缺口。</p>
                    <p>在过去的一段的时间，我一直在寻求持久之道，已维持你眼前所见的一切。而 layuiAdmin 是我们尝试解决的手段之一。我相信真正有爱于 layui 生态的你，定然不会错过这一拥抱吧。</p>
                    <p>子曰：君子不用防，小人防不住。请务必通过官网正规渠道，获得 <a href="http://www.layui.com/admin/"
                                                        target="_blank">layuiAdmin</a>！</p>
                    <p>—— 贤心（<a href="http://www.layui.com/" target="_blank">layui.com</a>）</p>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    layui.use(['index', 'sample'], function () {
        var $ = layui.$
            , setter = layui.setter
            , admin = layui.admin
            , form = layui.form

        //显示订单信息
        $.post("../../Quantity",
            function (data) {
                $.each(data, function (i, n) {
                    $("#ulS").append(
                        "<li class='layui-col-xs3'>"
                        + "<a href='javascript:;' class='layadmin-backlog-body'>"
                        + "<h3>" + n.name + "</h3>"
                        + "<p><cite style='color: #FF5722;'>" + n.value + "</cite></p>"
                        + "</a>"
                        + "</li>")
                });
            }, "json");

        var arrayDate = [];
        var arraySumCost = [];
        var arrayReceivedCost = [];
        var arrayUnpaidCost = [];
        var arrayDateOne = [];
        var arrayInformation1 = [];
        var arrayInformation2 = [];
        var arrayInformation3 = [];
        var arrayInformation4 = [];
        var arrayInformation5 = [];
        var arrayInformation6 = [];
        var arrayInformation7 = [];


        var myChart = echarts.init(document.getElementById('Circular'));

        var myWay = echarts.init(document.getElementById('way'));
        myWay.setOption({
            title: {
                text: '运单详情'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['货物数量', '提货费', '送货费', '货物价值', '卸货费', '基本费用', '应付总金额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: arrayDateOne
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '货物数量',
                    type: 'line',
                    stack: '总量',
                    data: arrayInformation1
                },
                {
                    name: '提货费',
                    type: 'line',
                    stack: '总量',
                    data: arrayInformation2
                },
                {
                    name: '送货费',
                    type: 'line',
                    stack: '总量',
                    data: arrayInformation3
                },
                {
                    name: '货物价值',
                    type: 'line',
                    stack: '总量',
                    data: arrayInformation4
                },
                {
                    name: '卸货费',
                    type: 'line',
                    stack: '总量',
                    data: arrayInformation5
                },
                {
                    name: '基本费用',
                    type: 'line',
                    stack: '总量',
                    data: arrayInformation6
                },
                {
                    name: '应付总金额',
                    type: 'line',
                    stack: '总量',
                    data: arrayInformation7
                }
            ]
        });
        myChart.setOption({
            color: ['#80FFA5', '#00DDFF', '#37A2FF'],
            title: {
                text: '财务账单统计'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['应收总金额', '已收总金额', '未结总金额']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '应收总金额',
                    type: 'line',
                    stack: '应收总金额',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(128, 255, 165)'
                        }, {
                            offset: 1,
                            color: 'rgba(1, 191, 236)'
                        }])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '已收总金额',
                    type: 'line',
                    stack: '已收总金额',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 221, 255)'
                        }, {
                            offset: 1,
                            color: 'rgba(77, 119, 255)'
                        }])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '未结总金额',
                    type: 'line',
                    stack: '未结总金额',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(55, 162, 255)'
                        }, {
                            offset: 1,
                            color: 'rgba(116, 21, 219)'
                        }])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }

            ]
        });


        //显示数据视图运单视图
        $.post("../../FinanceWay",
            function (data) {
                $.each(data.viewdata, function (i, n) {
                    arrayDate.push(n.date);
                    arraySumCost.push(n.sumCost);
                    arrayReceivedCost.push(n.receivedCost);
                    arrayUnpaidCost.push(n.unpaidCost);
                });
                $.each(data.showMaps, function (i, n) {
                    arrayDateOne.push(n.dateTime);
                    arrayInformation1.push(n.quantity);
                    arrayInformation2.push(n.picUpCharge);
                    arrayInformation3.push(n.deliveryFee);
                    arrayInformation4.push(n.cargoValue);
                    arrayInformation5.push(n.unloadFee);
                    arrayInformation6.push(n.cost);
                    arrayInformation7.push(n.aggregateAmount);
                });

            }, "json").done(function (data) {
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                xAxis: {
                    data: arrayDate
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '应收总金额',
                    data: arraySumCost
                }, {
                    // 根据名字对应到相应的系列
                    name: '已收总金额',
                    data: arrayReceivedCost
                }, {
                    // 根据名字对应到相应的系列
                    name: '未结总金额',
                    data: arrayUnpaidCost
                }]
            });
            myWay.setOption({
                xAxis: {
                    data: arrayDateOne
                },
                series: [
                    {
                        name: '货物数量',
                        data: arrayInformation1
                    },
                    {
                        name: '提货费',
                        data: arrayInformation2
                    },
                    {
                        name: '送货费',
                        data: arrayInformation3
                    },
                    {
                        name: '货物价值',
                        data: arrayInformation4
                    },
                    {
                        name: '卸货费',
                        data: arrayInformation5
                    },
                    {
                        name: '基本费用',
                        data: arrayInformation6
                    },
                    {
                        name: '应付总金额',
                        data: arrayInformation7
                    }]
            })
        });


    });
</script>


